<docs>
  ## 首页
</docs>
<template>
  <!-- 内边距container 开始 -->
  <div class="container">
    <div v-if="!visibleSwipe">
      <div class="header">
        <h3 class="title">首页</h3>
      </div>
      <!-- 搜索 -->
      <div class="search">
        <input
          class="searchBar"
          @change="changeInput = '1'"
          v-model="form.qwgjz"
          @click="GET_history(1)"
          placeholder="请输入您要查询的岗位、单位"
        />
        <i class="iconfont icon-search" @click="GET_history(1)"></i>
        <div class="notice" v-if="txtflag">
          <span class="noticeBar">消息</span>
          <div class="notice_content">
            <div
              ref="ani"
              :style="
                'animation-duration:' +
                AniTime +
                's;' +
                'width:' +
                txtArr.length * 250 +
                'px;'
              "
            >
              <p v-for="(item, n) in txtArr" :key="n" @click="noticelink(item)">
                {{ item.txt }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <pagination-list
        @pullingDown="asyncFetch"
        :no-data="noData"
        class="search-result"
        :ajax-loading="ajaxLoading"
      >
        <position
          v-for="(item, index) in zpxx"
          :key="index"
          :job="item.gwmc"
          :money="item.xc"
          :company="item.dwmc"
          :gzdq="item.gzdq"
          :dwdjid="item.dwdjid"
          :zpgwid="item.zpgwid"
          :jlid="item.jlid"
          :sftxtdjl="item.sftxtdjl"
          :sfytdjl="item.sfytdjl"
          :sfjpgw="item.sfjpgw"
          :xl="item.whcd"
          :zplxrdh="item.zplxrdh"
          :sfyjycsqy="item.sfyjycsqy"
          :gwfbsj="item.gwfbsj"
          :sfdl="item.sfdl"
          :ygxs="item.ygxs"
          :homeFlag="homeFlag"
          :lxdhtx="item.lxdhtx"
          v-model="val"
          @link="link_bank"
        ></position>
      </pagination-list>
      <!-- 投递简历弹框 -->
      <sub-confirm
        :visible.sync="visibleResume"
        :jlxx="jlxx"
        @qrtd="toudi"
      ></sub-confirm>
      <!-- 搜索历史 -->
      <search-history
        :visible.sync="visibleHistory"
        :qwgjz.sync="form.qwgjz"
        :List="historyList"
        @search="GET_search"
      ></search-history>
    </div>
    <swiper @visiHide="visibleSwip" v-else></swiper>
  </div>
</template>
<script>
import Position from "base/job/jobList";
import $ from "@/common/js/axios";
import store from "@/store/index";
import swiper from "base/swiper";
import HelpBtn from "@/components/helpBtn/helpBtn";
import PaginationList from "base/paginationList/paginationList";
import searchHistory from "base/searchHistory/history";

export default {
  name: "home",
  components: { Position, PaginationList, swiper, searchHistory },
  data() {
    return {
      homeFlag: "1",
      txtflag: "",
      changeInput: "",
      visibleResume: false,
      visibleSwipe: false,
      val: {},
      zpxx: [],
      jlxx: {},
      historyList: {}, //历史搜索数据
      visibleHistory: false, //历史搜索弹框
      form: {
        sslx: "2",
        qwgjz: "",
        pageNum: 1,
        pageSize: "10",
        sfsccx: 1, //第一次进入标识（防止后台查不出数据）
      },
      gwxx: {
        jlid: "",
        zpgwid: "",
        sftxtdjl: "",
      },
      txt: "",
      txtArr: [], //消息数组
      ajaxLoading: false,
      noData: false,
      AniTime: "",
      winHeight: "",
      arrow_flag: false,
    };
  },
  watch: {
    val: function (val) {
      this.gwxx.zpgwid = val.zpgwid;
      this.gwxx.sftxtdjl = val.sftxtdjl;
      if (val.sftxtdjl === "0") {
        this.visibleResume = true;
      } else {
        this.visibleResume = false;
        this.toudi(1);
      }
    },
    visibleHistory: function (val) {
      if (val) {
        this.$modalHelper.afterOpen();
      } else {
        this.$modalHelper.beforeClose();
      }
    },
  },
  methods: {
    // link_bank跳转
    link_bank(gwid, dwid) {
      this.$router.push({
        name: "newjobDetail",
        query: { dm: gwid, _id: dwid },
      });
    },
    // 消息跳转
    noticeLink() {
      this.$router.push({ path: "/user/resume" });
    },
    visibleSwip(val) {
      this.visibleSwipe = false;
      this.$store.commit("SET_VISIBLE_SWIPER", val);
      if (!val) {
        this.GET_search();
      }
    },
    // 搜索历史，职位
    GET_history(flag) {
      this.$loading = true;
      this.$http
        .get("/grgl/sshxCx")
        .then((res) => {
          const data = res.returnData;
          // 无查询结果
          this.visibleHistory = true;
          if (+data.executeResult === 1) {
            this.visibleHistory = true;
            this.historyList = data.zpxx; //岗位
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    // 投递简历
    toudi(data) {
      this.$loading = true;
      data ? (this.gwxx.sftxtdjl = "1") : (this.gwxx.sftxtdjl = "0");
      $.post("/grgl/jltdxxBc", this.gwxx)
        .then((res) => {
          if (+res.returnCode === 1) {
            this.visibleResume = false;
            this.$alert(res.returnData.message);
            var _pag = sessionStorage.setItem("page", 1);
            this.zpxx = [];
            this.GET_search();
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    //获取简历信息列表
    Resume_list() {
      $.get("/grgl/jlxxCx").then((res) => {
        const data = res.returnData;
        this.jlxx = data.jlxx;
        this.gwxx.jlid = this.jlxx.jlid;
        // 首页提示消息
        if (
          +data.ytsxx ||
          +data.qyckjl ||
          +data.qymstz ||
          +data.grgzdw ||
          +data.grscgw
        ) {
          this.txtflag = true;
        } else {
          this.txtflag = false;
        }
        +data.ytsxx ? this.txtArr.push({ txt: data.tsxx, id: 1 }) : ""; //简历
        +data.qyckjl ? this.txtArr.push({ txt: data.qyckjlxx, id: 2 }) : ""; //企业查看
        +data.qymstz ? this.txtArr.push({ txt: data.qymstzxx, id: 3 }) : ""; //面试通知
        +data.grgzdw ? this.txtArr.push({ txt: data.grgzdwxx, id: 4 }) : ""; //单位关注
        +data.grscgw ? this.txtArr.push({ txt: data.grscgwxx, id: 5 }) : ""; //岗位收藏

        let length = 340 + 250 * this.txtArr.length;
        let speed = 32.8; //速度 590 / 18
        this.AniTime = (length / speed).toFixed(1);

        let style = document.createElement("style");
        style.setAttribute("type", "text/css");
        document.head.appendChild(style);
        let sheet = style.sheet;
        sheet.insertRule(
          `@keyframes scrollText2 {
          from {
            transform: translateX(340px);
          }
          to {
            transform: translateX(` +
            -250 * this.txtArr.length +
            `px);}
          }`,
          0
        );
      });
    },
    // 消息跳转
    noticelink(item) {
      if (item.id == "1") {
        this.$router.push({ name: "userResume" });
      } else if (item.id == "2") {
        this.$router.push({ name: "userSendlist", query: { look: "1" } });
      } else if (item.id == "3") {
        this.$router.push({ name: "Mynotice" });
      } else if (item.id == "4") {
        this.$router.push({ name: "UsersightList" });
      } else if (item.id == "5") {
        this.$router.push({ name: "UsercollectList" });
      }
    },
    // 搜索职位
    GET_search(page = 1, i) {
      const GET_session = sessionStorage.getItem("qwgjz");
      if (!this.changeInput && GET_session && GET_session != "undefined") {
        this.form.qwgjz = GET_session;
      }
      if (page == 1 && i) {
        this.zpxx = [];
        this.form.qwgjz = i;
      }
      this.$loading = true;
      this.ajaxLoading = true;
      this.form.pageNum = page;

      $.post("/grgl/zpxxSs", this.form)
        .then((res) => {
          this.form.sfsccx = "";
          sessionStorage.setItem("qwgjz", this.form.qwgjz);
          sessionStorage.setItem("page", page);
          const data = res.returnData;
          // 无查询结果
          if (+data.executeResult === 0) {
            this.noData = true;
            // this.zpxx = [];
            if (page === 1) {
              this.zpxx = [];
            }
          } else {
            this.noData = false;
            // 有数据
            if (page === 1) {
              this.zpxx = data.zpxx;
            } else {
              this.zpxx = this.zpxx.concat(data.zpxx);
            }
          }
        })
        .finally(() => {
          this.ajaxLoading = false;
          this.$loading = false;
        });
      this.showFlag = 0;
    },
    // async fetach data
    asyncFetch() {
      var page = +sessionStorage.getItem("page");
      page = page + 1;
      this.GET_search(page);
    },
  },
  created() {
    this.visibleSwipe =
      this.$store.getters.visibleSwiper && this.$store.getters.visibleSwiperGo;
    if (!this.visibleSwipe) {
      this.GET_search();
    }
    this.Resume_list();
  },
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.container {
  // padding: $padding-base;
  .search {
    height: $height-input + $radius-base;
    padding: 0 $padding-base;
    position: relative;
    background: linear-gradient(90deg, #1d66d4, #00baff);
    .notice {
      height: $radius-base4;
      line-height: $radius-base4;
      margin-top: $font-size-ts;
      font-size: $font-size-mini;
      border-radius: $font-size-ts;
      background-color: #fff;
      span {
        float: left;
        display: block;
        width: $height-width_line * 3;
        height: $radius-base4;
        line-height: $radius-base4;
        text-align: center;
        background-size: $radius-base2;
        box-sizing: border-box;
        border-radius: $font-size-ts 0 0 $font-size-ts;
        color: #fefefe;
        background-color: #ff9900;
      }
      .notice_content {
        position: relative;
        height: 100%;
        line-height: 1;
        margin-left: $height-width_line * 3;
        width: calc(100% - $height-width_line * 3);
        overflow: hidden;
        div {
          position: absolute;
          height: 100%;
          line-height: 1;
          top: 0px;
          left: 0px;
          width: 2000px;
          overflow: hidden;
          -webkit-animation: scrollText2 30s infinite linear;
          animation: scrollText2 30s infinite linear;
          p {
            width: 500px;
            box-sizing: border-box;
            overflow: hidden;
            display: inline-block;
            height: $radius-base4;
            line-height: $radius-base4;
            background: url("~common/images/notice.png") $padding-base-half
              $margin-top no-repeat;
            background-size: $radius-base2;
            padding-left: $padding-base * 2;
            // margin-right: 50px;
          }
          p:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .input_tip {
      display: inline-block;
      position: absolute;
      top: $radius-base2;
      left: $padding-btn;
      font-size: $font-size-small;
      color: $color-text-placeholder;
      span {
        display: inline-block;
        vertical-align: sub;
        margin-left: $radius-base;
        height: $font-size-base;
        width: $font-size-base;
        background: url("~common/images/close.png") no-repeat;
        background-size: 100%;
      }
    }
    .searchBar {
      box-sizing: border-box;
      background-color: #fff;
      width: 100%;
      border-radius: $padding-base * 2;
      font-size: $font-size-base;
      height: 66px;
      line-height: 66px;
      padding-left: $padding-base;
    }
    input::-webkit-input-placeholder {
      color: rgba(204, 204, 204, 1);
    }
    .iconfont {
      position: absolute;
      right: $padding-base;
      top: 1px;
      font-size: 44px;
      width: $font-size-larges * 2;
      height: $height-input_base * 2;
      line-height: $height-input_base * 2;
      box-sizing: border-box;
      color: #fff;
      text-align: center;
      border-radius: 0 $padding-base * 2 $padding-base * 2 0;
      background-color: #002c6e;
    }
  }
}
</style>
